Skip to main content

Getting Started

Installation​

npm install react-native-flix-snackbar

Usage​

Wrap your root component in SnackbarProvider from react-native-flix-snackbar. This will usually be in the index.js or App.js file. If you have an Expo project, you can do this inside the exported component in the App.js file.

Example:

import { SnackbarProvider } from 'react-native-flix-snackbar';

export default function App() {
  return (
    <SnackbarProvider>
      <MainApp />
    </SnackbarProvider>
  );
}
info

After wrapping SnackbarProvider in root component, you can show snackbar in all of it's children components using useSnackbar hooks without declaring ref and import JSX in every component.

useSnackbar Example:

import React from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
import { useSnackbar } from 'react-native-flix-snackbar';

export default MainApp = props => {
  const { show } = useSnackbar();

  return (
    <View style={{flex: 1}}>
      // showing snackbar
      <TouchableOpacity onPress={() => show('Hi snackbar!')}>
        <Text>Open Snackbar</Text>
      </TouchableOpacity>;
    </View>
  );
};